<template>
	<div class="content">
		<div class="tab_box">
			<u-tabs
				:list="list1" 
				@click="clickTab"
				:activeStyle="{
					color: '#23AC39',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				:inactiveStyle="{
					color: '#999999',
					fontSize:'30rpx',
					fontWeight: 500
				}"
				lineColor="#23AC39"
			></u-tabs>
		</div>

		<div class="list_box" v-if="list.length">
			<div class="list" v-for="(item,index) in list" :key="index">
				<!-- <u-image radius="10rpx" width="270rpx" height="180rpx"  :lazy-load="true"></u-image> -->
				<div class="nr">
					<img mode="aspectFit" class="img" :src="item.pictures[0]" alt="">
					<p class="t_label" v-if="item.status == 1">待上架</p>
					<p class="t_label" v-if="item.status == 2">已上架</p>
					<p class="t_label" v-if="item.status == 3">已下架</p>
					<p class="t_label" v-if="item.status == -1">已驳回</p>
					<div class="msg">
						<div>
							<p class="title">{{item.title}}</p>
							<p class="label">{{item.categoryName}}</p>
						</div>
						<div class="dw">
							<p>
								<img src="/static/local-dw.png" alt="">
								{{item.areaName}}
							</p>
							<p>
								<img src="/static/local-dz.png" alt="">
								{{item.likesNum?item.likesNum:0}}
							</p>
						</div>
					</div>
				</div>
				<p class="reason" v-if="item.status == -1">驳回理由：{{item.reason}}</p>
				<div class="newanniu" v-if="item.status == -1">
					<p @click="againSubmit(item.id)">重新提交</p>
				</div>
			</div>
		</div>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>暂无内容</p>
		</div>

		<div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p @click="toFabu">一手加入</p>
				<p @click="toCompensate">保证金</p>
			</div>
		</div>
		<p style="height: 30rpx;"></p>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import Config from '@/config/index.js'
	import api from '@/api';
	export default {
		data() {
			return {
				list1: [{
                    name: '待上架',
					status:1,
                },{
                    name: '已上架',
					status:2,
                }, {
                    name: '已下架',
					status:3,
                },{
                    name: '已驳回',
					status:-1,
                }],
				tabIndex:0,
				list:[],
				param:{
					pageNo:1,
					pageSize:10,
					status:'1'
				},
			}
		},
		computed: {
			...mapState({
                token: state => state.user.token,
				userId:state => state.user.userId,
			})
		},
		onLoad() {
			this.getList()
		},
		onShow(){
			
		},
		methods: {

			clickTab(item){
				this.param.status = item.status
				this.tabIndex = item.index
				uni.vibrateShort();
				this.getList(true)
			},
			
			// 获取列表
			getList(state){
				this.$showLoading('加载中...')
				this.param.creator = this.userId
				api.user.user_local(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						if(this.param.pageNo>1 && !res.data.list.length){
							this.$toast('已经到底了~')
							return
						}
						if(state){
							this.list = []
						}
						res.data.list.map(item=>{
							if(item.pictures){
								item.pictures = item.pictures.split(',')
							}
						})
						this.list = this.list.concat(res.data.list)
					}
				})
			},

			toFabu(){
				uni.navigateTo({
					url: '/pages/local/fabu/index'
				});
			},

			toCompensate(){
				uni.navigateTo({
					url: '/pages/compensate/index'
				});
			},

			// 重新提交
			againSubmit(id){
				uni.navigateTo({
					url: `/pages/local/fabu/index?id=${id}`
				});
			}
		},
		onReachBottom(){
			this.param.pageNo++
			this.getFbList()
		}
	}
</script>

<style lang="scss" scoped>
	@mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F7F7F7;
		.tab_box{
			background: #fff;
			/deep/ .u-tabs__wrapper__nav__item{
				// justify-content: space-around;
				padding: 0 52rpx;
			}
		}
		.list_box{
			margin:0 30rpx;
			padding-bottom:50rpx;
			.list{
				background: #fff;
				margin-top:20rpx;
				border-radius: 10rpx;
				position: relative;
				.nr{
					display: flex;
				}
				.reason{
					height: 80rpx;
					display: flex;
					align-items: center;
					border-top:1px solid #f1f1f1;
					padding:0 30rpx;
					font-size:28rpx;
					color:#999;
					margin-top:30rpx;
				}
				.newanniu{
					padding:0 30rpx 30rpx 30rpx;
					p{
						width: 180rpx;
						height: 70rpx;
						line-height: 70rpx;
						background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
						border-radius: 100rpx;
						text-align: center;
						color: #fff;
						font-size: 28rpx;
						font-weight: 500;
					}
				}
				.t_label{
					display: inline-block;
					padding: 4rpx 10rpx;
					background: #b7b6b6;
					color: #fff;
					font-size: 24rpx;
					font-weight: 500;
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
					position: absolute;
					left: 0;
					top:0;
				}
				.img{
					width: 270rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
				.msg{
					flex: 1;
					display: flex;
					justify-content: space-around;
					flex-direction:column;
					padding:0 22rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
						color: #3D3D3D;
					}
					.label{
						display: inline-block;
						padding:0 8rpx;
						background: #23AC39;
						color:#fff;
						font-size:24rpx;
						font-weight: 500;
						border-radius: 6rpx;
						margin-top:10rpx;
					}
					.dw{
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #999999;
						font-size:24rpx;
						p{
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						img{
							width: 30rpx;
							height: 30rpx;
							margin-right:4rpx;
						}
					}
				}
			}
		}
		.anniu_box{
			width: 100%;
			height: 150rpx;
			.box{
				width: 92%;
				height: 150rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
				p{
					width: 46%;
					height: 96rpx;
					line-height: 96rpx;
					background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
					border-radius: 100rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
		.no_data{
			text-align: center;
			padding-bottom:50rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
